<template>
    <div class="mine-navbar">
         <!-- v-if="$slots.left" 当其插槽里有内容的时候才会显示结构 -->
        <div class="mine-navbar-left" v-if="$slots.left">
            <slot name="left"></slot>
        </div>
        <div class="mine-navbar-center" v-if="$slots.center">
            <slot name="center"></slot>
        </div>
        <div class="mine-navbar-right" v-if="$slots.right">
            <slot name="right"></slot>
        </div>
        <!-- 当title有值的时候才显示，显示的内容为title -->
        <h1 class="mine-navbar-title" v-if="title">
            <!-- 解决flex布局和ellipsis之间的冲突，将文字加在span -->
            <span class="mine-navbar-text" v-text="title"></span>
        </h1>
    </div>
</template>

<script>
  export default {
    name: 'MeNavbar',
    props: {
      title: {
        // 校验title，默认为空，不显示内容。只有传入正确类型的值才会被显示
        type: String,
        default: ''
      }
    }
  };
</script>

<style lang="scss" scoped>
    @import "~assets/scss/mixins";

    .mine-navbar {
        position: relative;
        @include flex-between();
        height: 50px;
        background-color: #fff;

        &-left {
            margin-left: 10px;
            // 当left 或 center有内容的时候，右侧可以不用绝对定位。这里的'~'是紧随left其后的兄弟选择器，
            ~ .mine-navbar-right {
                position: static;
            }
        }

        &-center {
            // 中间占据剩下宽度
            flex: 1;
            margin: 0 10px;
            // 当left 或 center有内容的时候，右侧可以不用绝对定位。这里的'~'是紧随left其后的兄弟选择器，
            ~ .mine-navbar-right {
                position: static;
            }
        }

        &-right {
            // 为了使得左边的图标为空的时候，右侧内容正常显示。对其进行绝对定位
            position: absolute;
            right: 0;
            // 绝对定位导致，不能享受父容器的flex布局，垂直居中，需要重新设置
            @include flex-center();
            height: 100%;
            margin-right: 10px;
        }

        &-title {
            // 为了使得title始终居中显示，对齐绝对定位
            position: absolute;
            top: 0;
            bottom: 0;
            // 固定宽度，当文字过多超过宽度的时候，显示省略号形式
            left: 20%;
            right: 20%;
            // 垂直水平居中
            @include flex-center();
            text-align: center;
        }
        &-text {
            width: 100%;
            line-height: 1.5;
            font-size: 18px;
            // 省略号
            @include ellipsis();
        }

    }
</style>
